<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博案例发布</title>
    <style>
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid skyblue;
            margin: 0 auto;
        }

        textarea {
            margin-top: 10%;
            margin-left: 20%;
            resize: none;
            outline: none;
        }

        li {
            position: relative;
            list-style: none;
            border-bottom: 1px solid #ddd;
            width: 300px;

        }

        a {
            position: absolute;
            
            right: 0;
            text-decoration: none;
            color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul></ul>
    </div>
</body>
<script>
    var ul = document.querySelector('ul')
    var txt = document.querySelector('textarea')

    var btn = document.querySelector('button')
    btn.addEventListener('click', function () {
        var li = document.createElement('li')
        if (txt.value == '') {
            return false
        }
        li.innerHTML = txt.value + '<a href="javascript:;">删除</a>'
        ul.insertBefore(li, ul.children[0])
        txt.value = ''
        var as = document.querySelectorAll('a')
        console.log(as.length);
        for (var i = 0; i < as.length; i++) {
          as[i].addEventListener('click',function(){
            ul.removeChild(this.parentNode)
          })
        }
    })


</script>
<!-- 
    let insertedNode = parentNode.insertBefore(newNode, referenceNode);
    newNode：将要插入的节点
    referenceNode：被参照的节点（即要插在该节点之前）
    insertedNode：插入后的节点
    parentNode：父节点
 -->

</html>